<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/common.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(function(){
		$("#bubmitBtn").click(function(){
			//检查用户名: 长度为6到12位, 只能输入数字和英文和下划线
			//alert("--");
			if($("#name").val()==""){
				$("#result").html("请填写用户名!");
				return false;
			}
		
			$("#message").html("");
			var $nameEle = $("#name");
			var reg = /^\w{6,18}$/;
			if(!reg.test($nameEle.val())) {
				alert("用户名长度为6到18位, 只能输入数字和英文和下划线");
				$nameEle[0].focus();
				return false;
			}
			
			//检查密码: 长度为6位, 只能输入数字和英文
			var $passwordEle = $("#password");
			reg = /^[a-zA-Z0-9]{6,100}$/;
			if(!reg.test($passwordEle.val())) {
				alert("密码的长度为至少6位, 只能输入数字和英文");
				$passwordEle[0].focus();
				return false;
			}
			
			//确认密码必须与密码相同
			var $password2Ele= $("#password2");
			if($password2Ele.val()!=$passwordEle.val()) {
				$password2Ele[0].focus();
				alert("确认密码必须与密码相同");
				return false;
			}
			
			//邮箱格式必须正确, 可以不输入
			var $emailEle = $("#email");
			reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			if($emailEle.val()!="" && !reg.test($emailEle.val())) {
				$emailEle[0].focus();
				alert("邮箱格式不正确!");
				return false;
			}
			
			var url = "${pageContext.request.contextPath}/valiName";
			$.post(
				url,
				{username:this.value},
				function(data) {
					if(data!=""||data!=null){
						alert(data);
						return false;
					}
				}
			);
			return true;
		});
		
		$("img").click(function(){
			this.src = this.src + "?" + new Date().getTime();
		});
		
		$("#name").blur(function(){
			$("#message").html("");
			var reg = /^\w{6,18}$/;
			if(this.value==""){
				this.focus();
				$("#result").html("请填写用户名!");
				return false;
			}
			if(!reg.test(this.value)) {
				this.focus();
				$("#result").html("请输入6-18位的字符!");
				return false;
			} else {
				$("#result").html("");
				var url = "${pageContext.request.contextPath}/regist";
				$.post(
					url,
					{username:this.value},
					function(data) {
						$("#result").html(data);
					}
				);
			}
		});
	});
</script>
</head>
<body>
	<div align="center">
		<div id="message" style="color: red; margin: 10px;">${message }</div>
		
		<form  action="${pageContext.request.contextPath }/regist" method="post">
			<input type="hidden" name="method" value="regist">
			<table style="width: 400px;">
				<colgroup>
					<col width="30%">
					<col width="70%">
				</colgroup>
				<tr style="background: #00ddaa;">
					<td colspan="2" align="center" style="height: 30px;">新用户注册</td>
				</tr>
				<tr>
					<td>用户名：</td>
					<td>
						<input class="txt" id="name" type="text" name="username" value="${param.username}"/>
						<span id="result" style="color: red"></span>
					</td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input class="txt" id="password" type="password" name="password" /></td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td><input class="txt" id="password2" type="password" name="password2"/></td>
				</tr>
				<tr>
					<td>邮箱：</td>
					<td><input class="txt" id="email" type="text" name="email"  value="${param.email}"/></td>
				</tr>
				<tr>
					<td>验证码：</td>
					<td>
						<input id="code" type="text" name="code" style="width: 100px;"/>
						<img src="${pageContext.request.contextPath }/client/ValidateColorServlet">
					</td>
				</tr>
				<tr>
					<td align="center" colspan="2"><input id="bubmitBtn"
						type="submit" value="立即注册"> <a href="<%=request.getContextPath() %>/client/user/login.jsp"> 登 陆 </a></td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>